<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | ChartJS</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../plugins/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../plugins/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../plugins/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>






<body  class="hold-transition skin-blue sidebar-mini">
<div>
	
  <div >
  	
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-6">
        	
        	
        	<div class="box box-success">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>
              <h3 class="box-title">区域占比</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="areaCountChart" style="height:40%"></canvas>
              </div>
            </div>
          </div>
        
        	
        
          <div class="box box-info">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>
              <h3 class="box-title">年龄统计</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="ageCountChart" style="height:40%"></canvas>
              </div>
            </div>
          </div>
          
        </div>
        
        
        
        
        <div class="col-md-6">
          
          <!-- AREA CHART -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>
              <h3 class="box-title">性别比例</h3>
              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="genderCountChart" style="height:45%"></canvas>
              </div>
            </div>
          </div>
        
			

          <div class="box box-danger">
            <div class="box-header with-border">
              <i class="fa fa-bar-chart-o"></i>
              <h3 class="box-title">能力等级统计</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <canvas id="abilityLevelChart" style="height:40%"></canvas>
            </div>
          </div>
          
          
          
        </div>
      </div>
      
      

    </section>
  </div>
  

<script src="../plugins/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../plugins/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../plugins/bower_components/chart.js/Chart.js"></script>
<script src="../plugins/bower_components/fastclick/lib/fastclick.js"></script>
<script src="../plugins/adminLTE/js/adminlte.min.js"></script>
<script src="../plugins/adminLTE/js/demo.js"></script>
<script>
  $(function () {
	  
	  $.post('../summary/count.action' , function(data){
		 	console.log(data);
		 	
		 	var ability = data.ability;
		 	
			// ---------- 能力等级统计
			var abilityChartData = {
		       // x轴显示的label
		       labels:['能力完好',  '轻度失能', '中度失能',  '重度失能'],
		       datasets:[{               
		             fillColor:'#9370DB',// 填充色              
		             data:[ability.ability_0?ability.ability_0:0, ability.ability_1?ability.ability_1:0, ability.ability_2?ability.ability_2:0, ability.ability_3?ability.ability_3:0], // 数据               
		             label:'能力等级' // 图例
		       }]
			};
			
			var abilityChartCanvas    = $('#abilityLevelChart').get(0).getContext('2d')
		    var abilityChart          = new Chart(abilityChartCanvas)
		    var abilityChartData      = abilityChartData;
		    var abilityChartOptions   = {
		      scaleBeginAtZero        : false, //y轴标记是否从0开始
		      scaleShowGridLines      : true, // 是否显示网格线
		      scaleGridLineColor      : 'rgba(0,0,0,.05)', // 网格线的颜色
		      scaleGridLineWidth      : 1, // 网格线的线宽
		      scaleShowHorizontalLines: true, // 是否显示横向线
		      scaleShowVerticalLines  : true, // 是否显示竖向线
		      barShowStroke           : true, // 是否显示线
		      barStrokeWidth          : 2, // 线宽
		      barValueSpacing         : 20,// 柱状块与x值所形成的线之间的距离
		      barDatasetSpacing       : 5, // 在同一x值内的柱状块之间的间距
		      
		      // 动画完成后调用的函数(每个柱上显示对应的数据)
		      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
		      responsive              : true, //
		      maintainAspectRatio     : true
		    }
		
		    abilityChartOptions.datasetFill = false;
		    abilityChart.Bar(abilityChartData, abilityChartOptions);
			
		    
		    
		    
		    
		 	// ----------------------- 性别统计开始
		    var gender = data.gender;
		 	
		    var genderChartCanvas   = $('#genderCountChart').get(0).getContext('2d')
		      var genderChart       = new Chart(genderChartCanvas)
		      
		 	  var genderData        = [
		        {
		          value    : gender.gender_1?gender.gender_1:0,
		          color    : '#f56954',
		          highlight: '#f56954',
		          label    : '男'
		        },
		        {
		          value    : gender.gender_2?gender.gender_2:0,
		          color    : '#00a65a',
		          highlight: '#00a65a',
		          label    : '女'
		        }
		      ]
		 		
		      var genderOptions     = {
		        segmentShowStroke    : true,
		        segmentStrokeColor   : '#fff',
		        segmentStrokeWidth   : 2,
		        percentageInnerCutout: 50, // This is 0 for Pie charts
		        animationSteps       : 100,
		        animationEasing      : 'easeOutBounce',
		        animateRotate        : true,
		        animateScale         : false,
		        responsive           : true,
		        maintainAspectRatio  : true,
		        legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
		      }
		     genderChart.Doughnut(genderData, genderOptions);
		    
		  	// ----------------------- 性别统计结束
		    
		  	
		  	
		  // ---------------------- 年龄统计开始
		  
		  var age = data.age;
		  
		  var ageChartData = {
		       // x轴显示的label
		       labels:['60以下', '60-69','70-79','80-89','90以上'],
		       datasets:[{               
		             fillColor:'#9370DB',// 填充色              
		             data:[age.age_60?age.age_60:0, 
		            	   age.age_60_70?age.age_60_70:0, 
		            	   age.age_70_80?age.age_70_80:0, 
		            	   age.age_80_90?age.age_80_90:0,
		            	   age.age_90?age.age_90:0,], // 数据               
		             label:'月销售量' // 图例
		       }]
			};
			
			var ageChartCanvas        = $('#ageCountChart').get(0).getContext('2d')
		    var ageChart              = new Chart(ageChartCanvas)
		    var ageChartData          = ageChartData;
		    var ageChartOptions       = {
		      scaleBeginAtZero        : false, //y轴标记是否从0开始
		      scaleShowGridLines      : true, // 是否显示网格线
		      scaleGridLineColor      : 'rgba(0,0,0,.05)', // 网格线的颜色
		      scaleGridLineWidth      : 1, // 网格线的线宽
		      scaleShowHorizontalLines: true, // 是否显示横向线
		      scaleShowVerticalLines  : true, // 是否显示竖向线
		      barShowStroke           : true, // 是否显示线
		      barStrokeWidth          : 2, // 线宽
		      barValueSpacing         : 20,// 柱状块与x值所形成的线之间的距离
		      barDatasetSpacing       : 5, // 在同一x值内的柱状块之间的间距
		      
		      // 动画完成后调用的函数(每个柱上显示对应的数据)
		      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
		      responsive              : true, //
		      maintainAspectRatio     : true
		    }
	
		    ageChartOptions.datasetFill = false;
		    ageChart.Bar(ageChartData, ageChartOptions);
		    // ---------------------- 年龄统计结束
		  	
		    
		    
		    
		    //---------------------------------- 区域占比统计开始
		    var area = data.area;
		 	
		    var areaChartCanvas   = $('#areaCountChart').get(0).getContext('2d')
		      var areaChart       = new Chart(areaChartCanvas)
		      
		 	  var areaData        = [
		        {
		          value    : area.bl?area.bl:0,
		          color    : '#f56954',
		          highlight: '#f56954',
		          label    : '碑林区'
		        },
		        {
		          value    : area.xc?area.xc:0,
		          color    : '#00a65a',
		          highlight: '#00a65a',
		          label    : '新城区'
		        },
		        {
		          value    : area.lh?area.lh:0,
		          color    : '#4169E1',
		          highlight: '#4169E1',
		          label    : '莲湖区'
		        },
		        {
		          value    : area.other?area.other:0,
		          color    : '#CCC000',
		          highlight: '#CCC000',
		          label    : '其他'
		        }
		      ]
		 		
		      var areaOptions     = {
		        segmentShowStroke    : true,
		        segmentStrokeColor   : '#fff',
		        segmentStrokeWidth   : 2,
		        percentageInnerCutout: 50, // This is 0 for Pie charts
		        animationSteps       : 100,
		        animationEasing      : 'easeOutBounce',
		        animateRotate        : true,
		        animateScale         : false,
		        responsive           : true,
		        maintainAspectRatio  : true,
		        legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
		      }
		    areaChart.Doughnut(areaData, areaOptions);
		    
		    
		    
		    //---------------------------------- 区域占比统计结束
		    
		    
		    
		    
		    
		    
		    
		  // ---------------------- 居住情况统计开始
		  /* 
		  var living = data.living;
		  
		  var livingChartData = {
		       // x轴显示的label
		       labels:['独居',  '与配偶居住', '与子女居住',  '与父母居住', '与兄弟姐妹居住', '与亲属居住','与非亲属居住 ', '养老机构'],
		       datasets:[{               
		             fillColor:'green',// 填充色              
		             data:[living.living_20?living.living_20:0, 
						   living.living_21?living.living_21:0, 
						   living.living_22?living.living_22:0, 
						   living.living_23?living.living_23:0,
						   living.living_24?living.living_24:0, 
						   living.living_25?living.living_25:0, 
						   living.living_26?living.living_26:0, 
						   living.living_27?living.living_27:0], // 数据               
		             label:'居住情况' // 图例
		       }]
			};
			
			var livingChartCanvas        = $('#livingCountChart').get(0).getContext('2d')
		    var livingChart              = new Chart(livingChartCanvas)
		    var livingChartData          = livingChartData;
		    var livingChartOptions       = {
		      scaleBeginAtZero        : false, //y轴标记是否从0开始
		      scaleShowGridLines      : true, // 是否显示网格线
		      scaleGridLineColor      : 'rgba(0,0,0,.05)', // 网格线的颜色
		      scaleGridLineWidth      : 1, // 网格线的线宽
		      scaleShowHorizontalLines: true, // 是否显示横向线
		      scaleShowVerticalLines  : true, // 是否显示竖向线
		      barShowStroke           : true, // 是否显示线
		      barStrokeWidth          : 2, // 线宽
		      barValueSpacing         : 10,// 柱状块与x值所形成的线之间的距离
		      barDatasetSpacing       : 5, // 在同一x值内的柱状块之间的间距
		      
		      // 动画完成后调用的函数(每个柱上显示对应的数据)
		      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
		      responsive              : true, //
		      maintainAspectRatio     : true
		    }
	
		    livingChartOptions.datasetFill = false;
		    livingChart.Bar(livingChartData, livingChartOptions);
		    // ---------------------- 居住情况结束
			    
		     */
		    
		    
		    
		    
		  });
	
	  
  })
</script>
</body>
</html>
